<template>
  <div id="user_manage">
    <el-table
        :data="userList"
        border
        style="width: 100%;">
      <el-table-column
          prop="nickname"
          label="用户昵称"
          width="150">
      </el-table-column>
<!--      <el-table-column-->
<!--          prop="realName"-->
<!--          label="真实姓名"-->
<!--          width="150">-->
<!--      </el-table-column>-->
      <el-table-column
          prop="username"
          label="用户登录账号"
          width="150">
      </el-table-column>
<!--      <el-table-column-->
<!--          prop="kind"-->
<!--          label="用户性别"-->
<!--          width="150">-->
<!--        <template slot-scope="scope">-->
<!--          {{scope.row.kind?"女":"男"}}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
          prop="userPortrait"
          label="用户头像"
          width="400">
        <template slot-scope="scope">
          <img class="user_manage_portrait" :src="scope.row.userPortrait">
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="success">编辑</el-button>
          <el-button type="danger" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--  显示修改用户的子组件  -->
    <el-dialog title="修改用户" :visible.sync="isShowUpdateDialog">
      <UpdateUserMask
          :user-obj="currentBookObj"
          :borrow-list="borrowList"
          @onCancel="onCancel"/>
    </el-dialog>

  </div>
</template>

<script>

import {getAllUser,deleteUserByUserName} from "../../../../network/user";
import UpdateUserMask from "./UpdateUserMask";
import {getBorrowByUserName} from "../../../../network/borrow";


export default {
  name: "userManage",
  components: {UpdateUserMask},
  data(){
    return{
      userList:[],
      isShowUpdateDialog:false,
      currentBookObj:{},//当前用户
      borrowList:[],
    }
  },
  created() {
    //获取全部用户
    getAllUser().then((result)=>{
      console.log(result)
      this.userList=result.data.data;
    }).catch((reason)=>{
      console.log(reason);
    })
  },
  methods: {
    //单击编辑按钮时触发
    handleClick(row) {
      console.log(row);
      this.currentBookObj=row;
      this.isShowUpdateDialog=!this.isShowUpdateDialog;
      getBorrowByUserName(row.id).then((result)=>{
        console.log(result);
        this.borrowList=result.data.data
      }).catch((reason)=>{
        console.log(reason);
      })
    },
    //用于子组件的方法
    onCancel(){
      this.isShowUpdateDialog=false;
    },
    //单击删除按钮时触发
    deleteUser(row){
      deleteUserByUserName(row.userName).then((result)=>{
        console.log(result);
        if (result.data.data.code===200){
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          //跳转空白页,更新数据
          sessionStorage.setItem('sixthUrl','/admin/page/usermanage');
          this.$router.push('/blankPage');
        }
      }).catch((reason)=>{
        console.log(reason);
      })
    }
  },
}
</script>

<style scoped>
/*用户头像样式 图片*/
.user_manage_portrait{
  height: 100px;
}
</style>
